import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, InputNumber } from 'antd';
import styles from './index.less';
declare type Props = {
  value?: object;
  onChange?: Function;
  readOnly?: boolean;
  detail?: any;
};

let CapitalSource = ({
  value,
  onChange = () => {},
  readOnly,
  detail,
}: Props) => {
  const [initData, setInitData] = useState({});
  const getTotal = (value: any) => {
    return (
      (value.publicFunds || 0) +
      (value.currentLevelBudget || 0) +
      (value.superiorLevelBudget || 0) +
      (value.selfPrepare || 0) +
      (value.other || 0)
    );
  };
  // const [total, settotal] = useState(getTotal(value));
  // useEffect(()=>{

  // })
  const inputChange = (num, type) => {
    console.log(num);
    value[type] = num;
    // settotal(getTotal(value));
    onChange({ ...value, total: getTotal(value) });
  };
  value = value || {};
  return (
    <Row justify="space-around">
      <Col span={3}>
        <Row>公用经费(万元)</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.publicFunds}</Row>
        ) : (
          <InputNumber
            className={styles.moneyInput}
            step="0.01"
            value={value.publicFunds}
            onChange={e => inputChange(e, 'publicFunds')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>本级预算(万元)</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.currentLevelBudget}</Row>
        ) : (
          <InputNumber
            className={styles.moneyInput}
            step="0.01"
            value={value.currentLevelBudget}
            onChange={e => inputChange(e, 'currentLevelBudget')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>上级专项(万元)</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.superiorLevelBudget}</Row>
        ) : (
          <InputNumber
            className={styles.moneyInput}
            step="0.01"
            value={value.superiorLevelBudget}
            onChange={e => inputChange(e, 'superiorLevelBudget')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>单位自筹（万元）</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.selfPrepare}</Row>
        ) : (
          <InputNumber
            className={styles.moneyInput}
            step="0.01"
            value={value.selfPrepare}
            onChange={e => inputChange(e, 'selfPrepare')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>其他（万元）</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.other}</Row>
        ) : (
          <InputNumber
            className={styles.moneyInput}
            step="0.01"
            value={value.other}
            onChange={e => inputChange(e, 'other')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>其他来源备注</Row>
        {readOnly ? (
          <Row className={styles.text}>{value.otherRemark}</Row>
        ) : (
          <Input
            className={styles.moneyInput}
            step="0.01"
            value={value.otherRemark}
            onChange={e => inputChange(e.target.value, 'otherRemark')}
          />
        )}
      </Col>
      <Col span={3}>
        <Row>合计（万元）</Row>
        {readOnly ? (
          <Row className={styles.text}>{getTotal(value)}</Row>
        ) : (
          <div>{getTotal(value)}</div>
        )}
      </Col>
    </Row>
  );
};
export default CapitalSource;
